<template>
  <view class="order-container">
    <scroll-view scroll-x class="tab-bar">
      <view v-for="tab in tabs" :key="tab.value" class="tab-item" :class="{ active: currentTab === tab.value }"
        @click="setTab(tab.value)">
        <text class="tab-text">{{ tab.label }}</text>
        <text class="tab-badge" v-if=" tabStats[tab.value] > 0">
          {{ tabStats[tab.value] }}
        </text>
      </view>
    </scroll-view>

    <view class="order-list">
      <template v-if="filteredOrders.length > 0">
        <order-item 
          v-for="order in filteredOrders"
          :key="order.id"
          :order="order"
          @cancel="handleCancel"
        />
      </template>
      <empty-state v-else />
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";

import { storeToRefs } from 'pinia'
import { useOrderStore } from '../../stores/order'
import { OrderItem } from '../../components/OrderItem.vue'
import { EmptyState } from '../../components/OrderItem.vue'


const orderStore = useOrderStore()
const {filteredOrders,currentTab, tabStats, loading } = storeToRefs(orderStore)
const {fetchOrders, setCurrentTab, cancelOrder} = orderStore
 

const tabs =[
{ label: '全部', value: 'all' },
{ label: '制作中', value: 'making' },
{ label: '已完成', value: 'completed' }]

onMounted(() => {
  fetchOrders()
  console.log("filteredOrders",filteredOrders.value);
  
  // console.log('订单数据:', orderStore.orders)
  // console.log('统计信息:', tabStats)
})
const setTab = (tab) => {
  currentTab.value = tab
}

const handleCancel = (orderId) => {
  uni.showModal({
    title: '取消订单',
    content: '确定取消该订单吗？',
    success: (res) => {
      if (res.confirm) {
        cancelOrder(orderId)
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.tab-bar {
  background: #fff;
  padding: 20rpx 0;
  white-space: nowrap;

  .tab-item {
    display: inline-flex;
    align-items: center;
    padding: 0 32rpx;
    height: 64rpx;

    &.active {
      border-bottom: #4d613c 5rpx solid;
      // background: #006635;
      .tab-text { color: #4d613c; }
      // .tab-badge { background: rgba(255,255,255,0.2); }
    }
  }

  .tab-badge {
    margin-left: 8rpx;
    padding: 4rpx 12rpx;
    border-radius: 24rpx;
    font-size: 24rpx;
  }
}


</style>
